<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>短语列表 - 獭米英语单词本</title>
  
  <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="../css/style.css">
</head>
<body>
  <!-- 导航栏 -->
  <nav class="navbar">
    <!-- Logo区域 -->
    <div class="navbar-left">
      <a href="../index.html" class="navbar-brand">
        <img src="../img/logo.png" alt="Logo" class="logo">
        <div class="brand-text">
          <span class="brand-name">獭米英语单词本</span>
          <span class="brand-slogan">Tami English Vocabulary Book</span>
        </div>
      </a>
    </div>
    
    <!-- 导航链接区域 -->
    <div class="navbar-center">
      <div class="navbar-nav">
        <a href="../index.html" class="nav-link">单词列表</a>
        <a href="phrases-list.html" class="nav-link active">短语列表</a>
        <a href="#" class="nav-link" data-page="vocabulary-test">测试词汇</a>
        <a href="update-log.html" class="nav-link">更新日志</a>
      </div>
    </div>
    
    <!-- 用户区域 -->
    <div class="navbar-right">
      <div class="nav-user" id="nav-user">
        <a href="account.html" class="nav-link" id="nav-login">登录</a>
        <div class="user-dropdown" id="user-dropdown" style="display: none;">
          <div class="user-info">
            <img src="../img/default-avatar.png" alt="头像" class="user-avatar" id="nav-user-avatar">
            <span class="nav-username" id="nav-username">用户名</span>
          </div>
          <div class="dropdown-menu" id="dropdown-menu">
            <a href="user.html" class="dropdown-item">个人中心</a>
            <button class="dropdown-item logout-btn" id="logout-btn">退出登录</button>
          </div>
        </div>
      </div>
    </div>
  </nav>
  
  <div class="app">
    
    <header class="app-header">
      <div class="search-container">
        <div class="search-box">
          <input type="text" id="search-input" placeholder="搜索短语...">
          <button class="search-btn">搜索短语</button>
          <button class="clear-search-btn hidden">清空搜索</button>
        </div>
        <div class="add-box">
          <button id="add-btn">添加短语</button>
        </div>
      </div>
    </header>
    
    <main class="word-list-container">
      <div class="filter-controls">
        <div class="filter-buttons">
          <button class="filter-btn active" data-filter="newest">最新</button>
          <button class="filter-btn" data-filter="oldest">最旧</button>
          <button class="filter-btn" data-filter="memorized">已记住</button>
          <button class="filter-btn" data-filter="unmemorized">未记住</button>
        </div>
        <div class="manage-controls">
          <button class="switch-list-view" id="switch-view-btn">
            <img src="../img/icon-table.svg" alt="切换视图" width="16" height="16">
          </button>
          <button class="manage-btn" id="manage-btn">管理</button>
          <div class="manage-actions" id="manage-actions" style="display: none;">
            <button class="manage-action-btn danger" id="delete-selected-btn">删除选中</button>
            <button class="manage-action-btn" id="finish-manage-btn">完成</button>
          </div>
        </div>
      </div>
      
      <!-- 短语统计信息 -->
      <div class="word-count-statistics" id="phrase-count-statistics">
        共 0 个短语，未记住 0 个，已记住 0 个
      </div>
      
      <table id="phrase-table">
        <thead>
          <tr>
            <th class="checkbox-column" style="display: none;">
              <input type="checkbox" id="select-all-checkbox" />
            </th>
            <th>序号</th>
            <th>短语</th>
            <th>翻译</th>
            <th>例句</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="phrase-list">
          <!-- 短语列表将通过JavaScript动态生成 -->
        </tbody>
      </table>
      
      <!-- 卡片视图 -->
      <div id="phrase-card-list" class="word-card-list" style="display: none;">
        <!-- 卡片列表将通过JavaScript动态生成 -->
      </div>
      
      <div class="empty-message hidden">
        <p>暂无短语数据</p>
      </div>
      
      <!-- 分页器 -->
      <div class="pagination-container">
        <div class="pagination">
          <button class="pagination-btn" id="first-page" title="首页">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"/>
            </svg>
          </button>
          <button class="pagination-btn" id="prev-page" title="上一页">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
            </svg>
          </button>
          <div class="page-numbers" id="page-numbers"></div>
          <button class="pagination-btn" id="next-page" title="下一页">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
            </svg>
          </button>
          <button class="pagination-btn" id="last-page" title="末页">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"/>
            </svg>
          </button>
        </div>
        <div class="page-jump">
          <span>跳到</span>
          <input type="number" id="jump-page" min="1" placeholder="页码">
          <span>页</span>
          <button class="pagination-btn" id="jump-btn">跳转</button>
        </div>
        <div class="page-info">
          <span id="page-info-text">第 1 页，共 1 页</span>
        </div>
      </div>
    </main>
    
    <!-- 添加短语的模态框 -->
    <div id="phrase-modal" class="modal hidden">
      <div class="modal-content">
        <span class="close-btn">&times;</span>
        <h2 id="modal-title">添加新短语</h2>
        <form class="word-form">
          <div class="form-group">
            <label for="phrase">短语:</label>
            <input type="text" id="phrase" required>
          </div>
          <div class="form-group">
            <label for="translation">翻译:</label>
            <textarea id="translation" rows="1" required></textarea>
          </div>
          <div class="form-group">
            <label for="example">例句:</label>
            <textarea id="example" rows="3"></textarea>
          </div>
          <div class="form-actions">
            <button type="button" class="cancel-btn">取消</button>
            <button type="submit" id="save-btn">保存</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- 页脚将通过common.js动态生成 -->

  <script src="../js/common.js"></script>
  <script src="../js/plugins.js"></script>
  <script src="../js/phrases-api-client.js"></script>
  <script src="../js/phrases-list.js"></script>
</body>
</html>
